import React, { useState, useEffect } from 'react';

import { Slider } from 'antd';
import styles from './index.less';

import { CloseOutlined } from '@ant-design/icons';

var oldValue = 360;

var oldWitdh = 0;

var oldLeft = -34;

var oldShowTime = '06:00';

var oldTime = 0;

var newValue;

export default function Time() {
  // 1440分钟=24小时

  const [timeValue, setTimeValue] = useState(0);

  //  遮罩层宽度变化

  const [width, setWidth] = useState(0);

  // 时间显示框移动的距离

  const [left, setLeft] = useState(-34);

  // 具体时间，用于调用接口的参数，含小数点

  const [time, setTime] = useState(0);

  // 是否展示时间显示框

  const [showTimeBox, setshowTimeBox] = useState(false);

  // 定时器变量

  const [timer, setTimer] = useState(null);

  // 开关状态-暂停和开始

  const [start, setStart] = useState(false);

  // 是否是拖动和点击后的开始

  const [clickStart, setClickStart] = useState(false);

  // 展示时间---初始值要变

  const [showTime, setShowTime] = useState('00:00');

  const [isSixClick, setSixClick] = useState(false);

  // 监听timeValue值的变化

  useEffect(() => {
    if (isSixClick) {
      if (timeValue == 360) {
        clearInterval(timer);

        setTimer(null);

        setStart(true);

        // 循环完一次停留在中午这里要变为9点

        setTimeValue(540);

        setWidth(43.2);

        oldLeft = 9.2;

        oldShowTime = '09:00';

        oldTime = 9;

        setLeft(oldLeft); //时间显示框位置

        // setLeft(1.3880)//时间显示框位置

        setShowTime(oldShowTime); //时间显示框显示12点

        // setTime(12)//time=12

        setTime(oldTime); //time=12

        // 拖动到了6点时回到0

        setClickStart(false);
      }
    }
  }, [timeValue, width, left, time, showTime]);

  // 小时和分钟

  let timeH;

  let timeF;

  // 显示小时和分钟

  let showTimeH;

  let showTimeF;

  const setTimeOn = () => {
    // 点击显示时间框

    setshowTimeBox(true);

    if (timer == null) {
      // 循环完回到9点后的开始

      if (start) {
        // 到了9点重新从0开始

        oldValue = 0;

        oldWitdh = 0;

        oldLeft = -34;

        oldShowTime = '00:00';

        oldTime = 0;

        setStart(false);
      }

      // 从点击或拖动后的值开始

      if (clickStart) {
        clearInterval(timer);

        setTimer(null);

        oldValue = timeValue;

        oldWitdh = width;

        oldLeft = left;

        oldShowTime = showTime;

        oldTime = time;

        setClickStart(false);
      }

      setTimer(
        setInterval(function () {
          if (oldValue == 1440) {
            // debugger

            oldValue = 0;

            // 判断是第二个6点

            setSixClick(true);

            // setTimeValue(oldValue)
          }

          oldValue += 1;

          oldWitdh += 0.24;

          oldLeft += 0.24;

          // 处理时间

          timeH = parseInt(oldValue / 60);

          timeF = ((oldValue % 60) / 100).toFixed(2);

          // 处理显示小时时候展示两位数

          if (parseInt(oldValue / 60) < 10) {
            showTimeH = '0' + timeH;
          } else {
            showTimeH = timeH;
          }

          // 处理显示分钟时候展示两位数

          if (oldValue % 60 < 10) {
            showTimeF = '0' + (oldValue % 60);
          } else {
            showTimeF = oldValue % 60;
          }

          oldShowTime = showTimeH + ':' + showTimeF;

          oldTime = parseInt(timeH) + parseFloat(timeF);

          // 设置实时变化的值

          setTimeValue(oldValue);

          setWidth(oldWitdh);

          setLeft(oldLeft);

          setTime(oldTime);

          setShowTime(oldShowTime);
        }, 10),
      );
    } else {
      // 在哪里暂停在哪里开始

      clearInterval(timer);

      setTimer(null);

      oldValue = timeValue;

      oldWitdh = width;

      oldLeft = left;

      oldShowTime = showTime;

      oldTime = time;
    }
  };

  // 点击和拖动

  const setValue = (value) => {
    if (value >= 0 && value <= 1080) {
      newValue = value + 360;

      setTimeValue(newValue);

      setClickStart(true);
    }

    if (value > 1080 && value <= 1440) {
      newValue = value - 1080;

      setTimeValue(newValue);

      setSixClick(true);

      setClickStart(true);
    }

    setTimer(clearInterval(timer));

    timeH = parseInt(newValue / 60);

    timeF = ((newValue % 60) / 100).toFixed(2);

    // 处理两位数

    if (parseInt(newValue / 60) < 10) {
      showTimeH = '0' + timeH;
    } else {
      showTimeH = timeH;
    }

    // 处理两位数

    if (newValue % 60 < 10) {
      showTimeF = '0' + (newValue % 60);
    } else {
      showTimeF = newValue % 60;
    }

    oldShowTime = showTimeH + ':' + showTimeF;

    oldTime = parseInt(timeH) + parseFloat(timeF);

    setTime(oldTime);

    setshowTimeBox(true); //是否展示时间显示框

    var widthNew = 0.24 * value;

    var leftNew = 0.24 * value - 34;

    console.log(widthNew, leftNew);

    setWidth(widthNew);

    setLeft(leftNew);

    setShowTime(oldShowTime);
  };

  return (
    <div className={styles.timeContainer}>
      <div className="time">
        {showTimeBox ? (
          <div
            style={{
              width: '72px',
              height: '30px',
              lineHeight: '34px',
              textAlign: 'center',
              position: 'absolute',
              top: '0',
              left: left + 'px',
              fontSize: '24px',

              color: '#fff',
            }}
          >
            <div
              style={{
                width: '72px',
                height: '25px',
                lineHeight: '25px',
                textAlign: 'center',
                fontSize: '24px',

                color: '#fff',
                backgroundColor: '#3370FF',
              }}
            >
              {showTime}
            </div>

            <div className="arrow"></div>
          </div>
        ) : null}

        <div>时间</div>

        <div className="recyangle">
          <div
            style={{
              display: 'flex',

              justifyContent: 'space-between',

              alignItems: 'center',
            }}
          >
            {/*  zIndex: 99 */}

            <div className="recyangle-time" style={{}}>
              <div className="recyangle-time-t">
                <span>06:00</span>

                <div className="bar"></div>

                <div className="bar"></div>

                <div className="bar"></div>

                <div className="bar"></div>

                <div className="bar"></div>

                <div className="bar"></div>

                <span>06:00</span>
              </div>

              <div
                style={{
                  position: 'absolute',

                  left: 0,

                  top: 0,

                  width: width + 'px',

                  height: '56px',

                  borderRadius: '12px',

                  backgroundColor: '#3370FF',

                  opacity: '0.7',
                }}
              ></div>

              <Slider onChange={setValue} max={1440} min={0} />
            </div>

            <div className="play" onClick={setTimeOn}>
              <CloseOutlined />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
